<template>
  <div class="demo-table">
    <div class="divide-title">表格</div>

    <base-table
      class="table-container"
      border
      :data-source="tableData"
      :columns="columns"
      row-key="id"
      :total="total"
      @selection-change="onTableSelectChange">
      <template #status="scope">
        <span>{{ scope.row.status | approveState }}</span>
      </template>

      <template #action>
        <el-button type="primary" size="small">新增</el-button>
      </template>
    </base-table>
  </div>
</template>

<script>
const columns = [
  { type: 'selection', fixed: true, reserveSelection: true },
  { type: 'index', title: '序号', width: 60, fixed: 'left' },
  { dataIndex: 'name', title: '姓名', width: 260, fixed: 'left' },
  { dataIndex: 'date', title: '日期', width: 200 },
  { dataIndex: 'address', title: '地址', width: 250 },
  { dataIndex: 'test1', title: 'test1', width: 160 },
  { dataIndex: 'test2', title: 'test2', width: 160 },
  { dataIndex: 'test3', title: 'test3', width: 160 },
  { dataIndex: 'test4', title: 'test4', width: 160 },
  { dataIndex: 'status', title: '状态', width: 160, scopedSlots: { customRender: 'status' } },
  { dataIndex: 'action', title: '操作', width: 200, fixed: 'right', scopedSlots: { customRender: 'action' } },
];

export default {
  name: 'demoTable',
  data() {
    return {
      columns,
      tableData: [],
      total: 0,
    };
  },

  mounted() {
    for (let i = 0; i <= 30; i++) {
      this.tableData.push({
        id: `${i + 1}`,
        name: `王小虎__${i + 1}`,
        address: `上海市普陀区金沙江路 15${i + 1} 弄`,
        status: Math.floor(Math.random() * 7),
        date: '2016-05-02',
        test1: i,
        test2: i,
        test3: i,
        test4: i,
      });
    }

    this.total = this.tableData.length;
  },

  methods: {
    onTableSelectChange(selections) {
      console.log('selections ==> ', selections);
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-table {
  width: 100%;
  height: 100%;

  .table-container {
    height: calc(100% - 32px);
  }
}
</style>
